<template>
    <div class="container mt-3">
        <button class="btn btn-primary" @click="gender = gender ? 0 : 1">双面人</button>
        <div>
        <p v-if="gender === 0">性别：♂ 男</p>
        <p v-else>性别：♀ 女</p>
        <hr>
        <p v-if="score >= 90">成绩评定A:奖励电脑一台</p>
        <p v-else-if="score >= 80">成绩评定B:奖励周末郊游</p>
        <p v-else-if="score >= 60">成绩评定C:奖励零食礼包</p>
        <p v-else>成绩评定D:惩罚一周不能玩手机</p>
        </div>
        
      <button class="btn btn-primary" @click="flage = !flage">盒子魔术</button>
      <div class="mt-3 alert alert-success" v-show="flage">我是v-show控制的盒子</div>
      <div class="mt-3 alert alert-info" v-if="flage">我是v-if控制的盒子</div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue';
  
  const flage = ref(false);
  // 1. 性别
const gender = ref(0) // 0-男 1-女 
// 2. 成绩
const score = ref(95)
  </script>
  
  <style scoped>
  /* 你可以在这里添加一些自定义样式，它们只会应用于这个组件 */
  </style>
  